<template>
  <div class="center-container">
    <el-card class="login-card">
      <template #header>
        <p class="card-header">欢迎登录</p>
      </template>
      <el-form
          ref="loginForm"
          :model="form"
          :rules="rules"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" autocomplete="off"/>
        </el-form-item>
        <el-form-item class="button-container">
          <el-button link type="info" @click="handleReset">忘记密码？</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
          <el-button type="primary" @click="getUserInfo">测试</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {loginApi,getUserInfoApi} from "@/api/login.js";

// 定义表单验证规则
const rules = reactive({
  username: [
    {required: true, message: '用户名不少于5个字符', trigger: 'blur', pattern: /^.{5,}$/}
  ],
  password: [
    {required: true, message: '密码不少于5个字符', trigger: 'blur', pattern: /^.{5,}$/}
  ]
})

// 定义表单数据
const form = reactive({
  username: 'admin',
  password: '123456'
})

// 创建表单引用
const loginForm = ref(null)

// 处理表单提交
const handleSubmit = () => {
  loginForm.value.validate((valid) => {
    if (valid) {
      console.log('Username:', form.username)
      console.log('Password:', form.password)
      loginApi(form).then(res => {
        console.log(res)
      })
      // 这里可以添加实际的登录逻辑
    } else {
      console.error('表单验证失败')
    }
  })
}

// 重置表单
const handleReset = () => {
  form.username = ''
  form.password = ''
  loginForm.value.resetFields()
}

const getUserInfo = () => {
  getUserInfoApi().then(res => {
    console.log(res)
  })
}
</script>

<style scoped>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 400px;
  max-width: 400px;
}

.card-header {
  text-align: center;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 80px;
}
</style>
